<template>
  <div id="userLayout" :class="['user-layout-wrapper']">
    <div class="userLayoutBack">
      <div class="container">
        <div class="loginBack">
          <span class="title">{{ systemName }}</span>
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import { systemInfo } from '@/api/user/login';
import { SET_TITLE } from '@/store/modules/app/mutations';
import ls from '@/utils/local-storage';
import { useStore } from 'vuex';

export default defineComponent({
  name: 'UserLayout',
  setup() {
    const store = useStore();

    onMounted(() => {
      document.body.classList.add('userLayout');
      getSystemInfo();
    });
    onUnmounted(() => {
      document.body.classList.remove('userLayout');
    });
    const systemName = ref('警情分析');
    // 获取系统信息
    const getSystemInfo = () => {
      systemInfo()
        .then(res => {
          systemName.value = res.data.name;
          ls.set('systemInfo', {
            systemName: systemName.value,
          });
          store.commit(`app/${SET_TITLE}`, systemName.value);
        })
        .catch(err => {
          console.log('获取系统信息 err=', err);
        });
    };
    return { systemName };
  },
});
</script>

<style lang="less" scoped>
#userLayout.user-layout-wrapper {
  height: 100%;
  overflow: hidden;
  background-image: url(~@/assets/image/statistics/back.png);
  &.mobile {
    .container {
      .main {
        width: 98%;
        max-width: 368px;
      }
    }
  }
  .userLayoutBack {
    height: 100%;
    // background: black;
  }
  .loginBack {
    position: relative;
    height: 100%;
    margin-top: 10%;
    margin-left: 500px;
    padding: 140px 40px;
    text-align: center;
    background-image: url(~@/assets/image/statistics/loginBack.png);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: 1043px 580px;

    .title {
      display: block;
      margin-top: 5px;
      color: #ffffff;
      font-weight: 400;
      font-size: 30px;
      font-family: Microsoft YaHei;
    }
  }
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    // background: red;
    background-image: url(~@/assets/image/statistics/backqiu2.png);
    background-repeat: no-repeat;
    background-position: 33% 0;
    background-size: 650px;
    a {
      text-decoration: none;
    }

    .top {
      text-align: center;

      .header {
        height: 44px;
        line-height: 44px;

        .badge {
          position: absolute;
          display: inline-block;
          margin-top: -10px;
          margin-left: -12px;
          line-height: 1;
          vertical-align: middle;
          opacity: 0.8;
        }

        .logo {
          height: 44px;
          margin-right: 16px;
          vertical-align: top;
          border-style: none;
        }
      }
      .desc {
        margin-top: 12px;
        margin-bottom: 40px;
        color: @text-color-secondary;
        font-size: 14px;
      }
    }

    .main {
      width: 368px;
      min-width: 260px;
      margin: 0 auto;
    }

    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      margin: 48px 0 24px;
      padding: 0 16px;
      text-align: center;

      .links {
        margin-bottom: 8px;
        font-size: 14px;
        a {
          color: @text-color-secondary;
          transition: all 0.3s;
          &:not(:last-child) {
            margin-right: 40px;
          }
        }
      }
      .copyright {
        color: @text-color-secondary;
        font-size: 14px;
      }
    }
  }
  //   @media screen and (max-width: 1200px) {
  //     .container {
  //       background-repeat: no-repeat;
  //       background-position: 30% 40%;
  //       background-size: 600px;
  //     }
  //   }
  //   @media screen and (max-width: 1400px) {
  //     .container {
  //       background-repeat: no-repeat;
  //       background-position: 30% 55%;
  //       background-size: 650px;
  //     }
  //     .loginBack {
  //       margin-top: 0%;
  //     }
  //   }
  //   @media screen and (max-width: 1800px) {
  //     .container {
  //       background-repeat: no-repeat;
  //       background-position: 30% 45%;
  //       background-size: 650px;
  //     }
  //     .loginBack {
  //       margin-top: 10%;
  //     }
  //   }
  //   @media screen and (max-width: 2000px) {
  //     .container {
  //       background-repeat: no-repeat;
  //       background-position: 30% 45%;
  //       background-size: 650px;
  //     }
  //   }
  //   @media screen and (min-width: 2100px) {
  //     .container {
  //       background-repeat: no-repeat;
  //       background-position: 35% 35%;
  //       background-size: 650px;
  //     }
  //   }
  //   @media screen and (min-width: 2400px) {
  //     .container {
  //       background-repeat: no-repeat;
  //       background-position: 35% 30%;
  //       background-size: 650px;
  //     }
  //   }
  //   @media screen and (min-width: 2600px) {
  //     .container {
  //       background-repeat: no-repeat;
  //       background-position: 40% 25%;
  //       background-size: 650px;
  //     }
  //   }
}
</style>
